<template>
  <div class="ccui-tree-table ccui-help-apply-usersmanual">
    <div class="ccui-navigation" style="margin-bottom:15px" ref="noPrintTop">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item :to="{ path: '/' }">{{
          $store.state.user.userDetal.agentName
        }}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/helpAndSupport/helpCenter' }"
          >帮助中心</el-breadcrumb-item
        >
        <el-breadcrumb-item>用户手册 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="ccui-tree-wrapper">
      <!-- :style="{
        position: treePosition,
        top: treeTop,
        height: treeMinHeight
    }" -->
      <div class="ccui-tree">
        <el-tree
          style="width: 220px; margin-left: 20px;"
          class="ccui-parent-tree ccui-flow-tree"
          ref="orgTree"
          v-if="isShowTree"
          :data="treeData"
          :props="treeProps"
          highlight-current
          :draggable="draggable"
          default-expand-all
          render-after-expand
          node-key="userManualId"
          :check-strictly="true"
          @node-click="nodeClickHandler"
          :expand-on-click-node="false"
        >
          <span
            :class="{
              'ccui-custom-tree-node': true,
              'ccui-level-one': level == 0,
              'ccui-level-two': level == 1
            }"
            slot-scope="{ node }"
          >
            <span :title="node.data.title">
              {{ node.label }}
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="ccui-app-container ccui-right-content">
      <div class="ccui-dic-content">
        <div class="ccui-content-onec">
          <h2 class="ccui-content-title" v-if="treeData.length != 0">
            {{ content.title }}
          </h2>
        </div>
        <div class="ccui-content-information" v-if="treeData.length != 0">
          <span class="ccui-information-title">发布时间</span>
          <span class="ccui-information">{{ content.publishTime }}</span>
          <span class="ccui-information-title">阅读量</span>
          <span class="ccui-information">{{ content.readingVolume }}</span>
          <span class="ccui-information-title">责任编辑</span>
          <span class="ccui-information">{{ content.personLiable }}</span>
        </div>
        <div
          class="ccui-content-text"
          v-if="content.text !== ''"
          v-html="content.text"
        ></div>
        <div class="ccui-content-text" v-if="content.text == ''">
          <img
            src="@/basa/assets/images/content_null.png"
            class="content-null-image"
            alt=""
          />
          <p class="ccui-content-null-text">暂无相关正文</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getUserManualTreeList,
  getUserManualTextContent
} from "../../api/help-apply-usersmanual";

export default {
  name: "help-edit-dic",
  data() {
    return {
      // 树布局
      treePosition: "absolute",
      treeMinHeight: "",
      minHeight: "0",
      treeTop: "50",
      draggable: false,
      // input 数据
      keyWord: "",
      // 树数据
      isShowTree: true,
      treeData: [],
      id: "",
      treeProps: {
        label: "titleCodeName",
        children: "children"
      },
      isShowBtn: false,
      level: 0,
      btnTxt: "编辑",
      draggabNode: "",
      content: {
        title: "",
        publishTime: "",
        readingVolume: "",
        personLiable: "",
        text: ""
      },
      appUId: process.env.VUE_APP_ID,
      userManualId: "", // 标题id
      autoCode: "" // 层级编码
    };
  },
  watch: {},
  created() {
    this.getUserManualTreeList();
    let scrollTop =
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop;
    this.treeMinHeight = window.innerHeight - 205 + scrollTop + "px";
  },
  mounted() {
    window.addEventListener("scroll", this.windowScroll);
  },
  methods: {
    // 点击节点查看正文
    getUserManualTextContent(data, once) {
      const obj = {
        userManualId: data.userManualId
      };
      getUserManualTextContent(obj, once)
        .then(res => {
          this.contentLoding = false;
          if (res.data.data.textContent != "" || once == true) {
            if (res.data.data.textContent != "") {
              window._paq.push([
                "trackEvent",
                "document",
                "click",
                "userManualId",
                data.userManualId
              ]);
            }
            this.content = {
              title: res.data.data.title,
              publishTime: res.data.data.publishTime,
              readingVolume: res.data.data.readingCnt,
              personLiable: res.data.data.publishUser,
              text: res.data.data.textContent
            };
          } else {
            this.$message.closeAll();
            this.$message({
              duration: 0,
              showClose: true,
              message: "该标题下无相关正文",
              type: "info",
              ccuiCustom: true
            });
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    // 点击节点
    nodeClickHandler(obj, node) {
      this.contentLoding = true;
      this.getUserManualTextContent(obj, false);
      this.userManualId = obj.userManualId;
      this.autoCode = obj.autoCode;
    },
    // 首屏加载
    getUserManualTreeList(key) {
      const obj = {
        appUId: this.appUId
      };
      getUserManualTreeList(obj)
        .then(res => {
          this.treeData = res.data.data.parentList;
          this.$nextTick(() => {
            if (res.data.data.parentList.length !== 0)
              if (key == undefined) {
                const key = res.data.data.parentList[0].userManualId;
                this.$refs.orgTree.setCurrentKey(key);
                this.getUserManualTextContent(
                  res.data.data.parentList[0],
                  true
                );
                this.userManualId = res.data.data.parentList[0].userManualId;
              } else {
                this.$refs.orgTree.setCurrentKey(key);
              }
          });
        })
        .catch(e => {
          console.log(e);
        });
    },
    windowScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.treePosition = scrollTop >= 185 ? "fixed" : "absolute";
      if (window.innerHeight - 200 + scrollTop <= window.innerHeight - 20) {
        this.treeMinHeight = window.innerHeight - 205 + scrollTop + "px";
      } else {
        this.treeMinHeight = window.innerHeight - 20 + "px";
      }
      this.treeTop = scrollTop >= 185 ? "0" : "50px";
    },
    // 点击弹窗确定
    dialogFormTrueMain(emit, data, tNode) {
      this.$refs.tree.append({ supplierTypeName: data, isLeaf: true }, tNode);
      this.treeNode.expanded = true;
      this.getData({
        supplierTypeCode: this.supplierTypeCode ? this.supplierTypeCode : null
      }); // 调用树接口
      this.getDataList({
        // 调用表格接口
        supplierTypeCode: this.supplierTypeCode ? this.supplierTypeCode : null,
        typeLevel: this.typeLevel ? this.typeLevel : null
      });
    },
    setCheckedKeys(key) {
      this.$refs.orgTree.setCheckedKeys([key]);
    },
    questionDialog(emit, data, tNode) {},
    handleBack() {
      this.$router.push("/helpAndSupport");
    }
  }
};
</script>
